<div id="message-view" class="layui-card-body layui-tab layui-tab-brief" style="padding: 5px 0;margin: 0;">
    <ul class="layui-tab-title" style="text-align: center;">
        <li class="layui-this">通知({{notices.length}})</li>
        <li>私信({{messages.length}})</li>
        <li>待办({{schedules.length}})</li>
    </ul>
    <div class="layui-tab-content" style="padding: 5px 0;">
        <div class="layui-tab-item message-list layui-show" p-each="notices" id="notices">
            <a class="message-list-item" href="javascript:;" >
                <img class="message-item-icon" p-bind="src:{{icon}}">
                <div class="message-item-right">
                    <h2 class="message-item-title">{{title}}</h2>
                    <p class="message-item-text">{{time}}</p>
                </div>
            </a>
        </div>
        <div class="layui-tab-item" p-each="messages">
            <a class="message-list-item" href="javascript:;">
                <img class="message-item-icon" p-bind="src:{{icon}}">
                <div class="message-item-right">
                    <h2 class="message-item-title">{{title}}</h2>
                    <p class="message-item-text">{{content}}</p>
                    <p class="message-item-text">{{time}}</p>
                </div>
            </a>
        </div>
        <div class="layui-tab-item" p-each="schedules">
            <a class="message-list-item" href="javascript:;">
                <div class="message-item-right">
                    <span class="layui-badge pull-right" p-if="{{state}}==1">待完成</span>
                    <span class="layui-badge layui-bg-gray pull-right" p-if="{{state}}==2">已完成</span>
                    <h2 class="message-item-title">{{title}}</h2>
                    <p class="message-item-text">{{time}}</p>
                </div>
            </a>
        </div>
    </div>
</div>

<script>
    var dataList = {
        noRead: 0,
        notices: [{
            icon: 'assets/images/message.png',
            title: '你收到了14份新周报',
            time: '10个月前'
        }, {
            icon: 'assets/images/message.png',
            title: '你收到了14份新周报',
            time: '10个月前'
        }],
        messages: [{
            icon: 'assets/images/head.png',
            title: 'xx评论了你',
            content: '哈哈哈哈哈哈',
            time: '10个月前'
        }, {
            icon: 'assets/images/head.png',
            title: 'xx评论了你',
            content: '哈哈哈哈哈哈',
            time: '10个月前'
        }],
        schedules: [{
            title: '你收到了14份新周报',
            time: '10个月前',
            state: 1
        }, {
            title: '你收到了14份新周报',
            time: '10个月前',
            state: 2
        }]
    };

    layui.use(['element', 'admin', 'index', 'config', 'util'], function () {
        var element = layui.element;
        let config = layui.config;
        let util = layui.util;
        let admin = layui.admin;
        var index = layui.index;
        var userinfo = '';

        index.getUser(function (user) {
            userinfo = user;
        })
        let data = {
            userid: userinfo.id,
            access_token: config.getToken().access_token
        };
        let notices = [];

        getNotice();
        // let noRead = 0;
        function getNotice() {
            admin.req('api-user/notice/getReceivedAndMarkNoReadNotice', data, function (res) {
                console.log(res.data);
                $("#notices").html("");
                for (let i = 0; i <= res.data.length; i++) {
                    let title = res.data[i].ntctle;
                    if (res.data[i].isRead == 0) {
                        title = title + '<span class="layui-badge-dot"></span>';
                        // noRead++;
                    } else
                        title = title + "(已读)";
                    let notice = {
                        icon: 'assets/images/message.png',
                        title: title,
                        time: util.toDateString(res.data[i].cretim)
                    };
                    $("#notices").append("<a class='message-list-item' onclick='noticeDetail(" + JSON.stringify(notice) + ")'><img class=message-item-icon src='../../assets/images/message.png'><div class='message-item-right'><h2 class='message-item-title'>" + notice.title + "</h2><p class='message-item-text'>" + notice.time + "</p></div></a>");
                    notices.push(notice);
                }
            }, 'GET');
        }

        // dataList.noRead = noRead;
        // dataList.notices = notices;
        // $('#message-view').vm(dataList);
        function noticeDetail(notice) {
            let data = JSON.parse(notice);
            layer.open({
                type: 1,
                title: data.ntctle, //不显示标题栏
                area: '310px',
                shade: 0.8,
                id: 'LAY_layuipro', //设定一个id，防止重复弹出
                moveType: 1, //拖拽模式，0或者1
                content: '<div style="padding:15px 20px; text-align:justify; line-height: 22px; text-indent:2em;border-bottom:1px solid #e2e2e2;">' + data.contnt + '</div><div style="padding:15px 20px; text-align:right; line-height: 22px; text-indent:2em;"><p>' + data.pbsher + '</p><p>' + util.toDateString(data.cretim) + '</p></div>',
                success: function (layero) {
                    let res = {
                        nticid: data.nticid,
                        userid: userinfo.id
                    }
                    console.log(res);
                    admin.req('api-user/notice/readNotice', res, function (data) {
                        console.log(data);
                    }, 'GET');
                },
                cancel: function () {
                    getNotice();
                }
            });
        }
    });
</script>